<!--
 * @Author: zqx me_zqx@163.com
 * @Date: 2025-05-16 15:53:31
 * @LastEditors: zqx me_zqx@163.com
 * @LastEditTime: 2025-06-16 15:31:56
 * @FilePath: /XMate-h5/src/views/minutes/components/transfer/header.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="flex flex-row items-center justify-between w-full my-2">
    <van-search class="w-full" v-bind="$attrs" placeholder="搜索" clearable />
    <div class="bg-[#F4F5F6] p-2 rounded-[8px] ml-2" @click="show = true">
      <img src="@/icons/svg/minute/ai_icon.svg" />
    </div>
    <div
      v-if="matchCount > 0"
      class="flex flex-row items-center ml-2 bg-[#f4f5f6] px-2 py-1 rounded"
    >
      <van-icon name="arrow-left" @click="$emit('jumpPrev')" class="cursor-pointer" />
      <span class="mx-1 text-xs">{{ matchIndex + 1 }}/{{ matchCount }}</span>
      <van-icon name="arrow" @click="$emit('jumpNext')" class="cursor-pointer" />
    </div>
  </div>
  <ConfigAIAsrPanel v-model:show="show" close-on-click-overlay />
</template>

<script setup lang="ts">
import { ref, defineProps } from "vue";
import ConfigAIAsrPanel from "./configAIAsrPanel.vue";

const show = ref(false);
defineProps({
  matchCount: { type: Number, default: 0 },
  matchIndex: { type: Number, default: 0 },
});
</script>

<style scoped>
div {
  --van-search-padding: 0 0px;
}
</style>
